import {Row,Col,Form,Input,Button } from 'antd';
import {useRequest,useNavigate,useModel} from '@umijs/max';
import {addUser} from '@/services/user';
function UserAdd(){
    const navigate = useNavigate();
    const {refresh} = useModel('user.model');
    const {run} = useRequest(addUser,{
      manual:true,//手动档 ,如果此选项为true,那么组件初次渲染的时候不会发请求，调用run方法的时候才发请求
      onSuccess(){//注册成功的回调,当接口成功后就调用refresh方法刷新用户列表，并跳转到列表页
        refresh();
        navigate('/user/list');
      }
    });
    const onFinish = (values)=>{
      run(values);//run方法的参数会传递给addUser方法
    }
    return (
        <Row>
          <Col offset={4} span={16}>
            <Form
               onFinish={onFinish}
               labelCol={{span:8}}
               wrapperCol={{span:16}}
            >
              <Form.Item 
                label="用户名" 
                name="username" 
                rules={[{required:true,message:'请输入用户名'}]}>
                  <Input/>
              </Form.Item>
              <Form.Item 
                label="密码" 
                name="password" 
                rules={[{required:true,message:'请输入密码'}]}>
                  <Input/>
              </Form.Item>
              <Form.Item 
                label="手机号" 
                name="phone" 
                rules={[{required:true,message:'请输入手机号'}]}>
                  <Input/>
              </Form.Item>
              <Form.Item wrapperCol={{offset:8,span:16}}>
                  <Button type="primary" htmlType="submit">提交</Button>
              </Form.Item>
            </Form>
          </Col>
        </Row>
    )
}
export default UserAdd;